<template>
  <div class="container">
    <div class="app-container">
      <el-tree :data="depts" default-expand-all :expand-on-click-node="false">
        <!-- 节点结构
            树形结构比较复杂 使用到了插槽
            而在tree组件中使用插槽会传入两个参数node data  data代表当前data="depts"绑定的数据对象
         -->
        <template v-slot="{data}">
          <el-row style="width:100%; height:40px" type="flex" justify="space-between" align="middle">
            <el-col>{{ data.name }}</el-col>
            <el-col :span="4">
              <span class="tree-manager">{{ data.managerName }}</span>
              <!-- 如何拿到 当前点击父级部门的id?
                    在作用域插槽中 data这个对象就包含了当前部门的id
                    在下拉菜单的事件处理函数中 把id 和 添加子部门的command传过去
                    下拉菜单的事件处理函数 默认就返回点击的是下拉菜单中的哪一项 那么可以通过事件对象$event拿到他
                  -->
              <el-dropdown trigger="click" @command="handleCommand($event,data.id)">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部分</el-dropdown-item>
                  <el-dropdown-item command="eidt">编辑部分</el-dropdown-item>
                  <el-dropdown-item command="del">删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 拿到父级id传递给子组件
         子组件在新增部门成功之后 通过自定义事件 告诉父级要重新获取部门列表
     -->
    <show-dialog ref="addedit" :isadd="isadd" :current-node-id="currentNodeId" :show-dialog.sync="showDialog" @fuckchange="getdepartment" />
    <!-- <show-dialog :show-dialog="showDialog" @update:showDialog="showDialog = $event" /> -->
  </div>
</template>

<script>
import { getDepartment, delDepartment } from '@/api/department'
// 导入讲扁平数组 转换为树形数组的方法
import { transitionTree } from '@/utils'
// 导入弹出组件
import ShowDialog from './components/showDialog.vue'
export default {
  name: 'Department',
  components: {
    ShowDialog
  },
  data() {
    return {
      depts: [
        // 树形数组
        // {
        //   name: '传智教育',

        //   children: [
        //     { name: '总裁办', manager: '毛勇' },
        //     { name: '行政办', manager: '曾志' },
        //     { name: '财务部', manager: '周宏铭' }
        //   ]

        // }
      ],
      // defaultProps: {
      //   children: 'children',
      //   // label 指定要呈现的字段名
      //   label: 'name'
      // },
      showDialog: false,
      // 再某一个部门下 添加子部门 用一个变量 存储当前点击项部门的id 并且传递给子组件
      currentNodeId: null,
      // 控制新增还是编辑
      isadd: true
    }
  },
  created() {
    this.getdepartment()
    // const rs = this.depts.filter(item => item.id ===)
    // console.log(rs)
    // console.log(this.depts)
  },
  methods: {
    async getdepartment() {
      const res = await getDepartment()
      this.depts = transitionTree(res, 0)
      // console.log(res)
      // console.log(this.depts)
    },
    handleCommand(value, id) {
      // console.log(value)
      if (value === 'add') {
        this.showDialog = true
        // 拿到id给存当前父级部门的id的变量
        this.currentNodeId = id
        this.isadd = true
        // console.log(this.currentNodeId)
      } else if (value === 'eidt') {
        // 编辑状态
        this.isadd = false
        // 拿到当前点击的id
        this.currentNodeId = id
        // 通过res获取组件实例对象 调用子组件的属性方法
        // this.$refs.addedit.eidtDepartment()
        // props 接收父组件数据更新是异步任务
        // 所有如果直接去子组件中使用props中接收的数据 有时候不一定会成功 props中的数据更新是异步的
        // 所有这里可以等待数据更新完毕再去调用子组件中的放啊
        this.$nextTick(async() => {
          await this.$refs.addedit.eidtDepartment()
          this.showDialog = true
        })
      } else {
        // 删除
        // 提示确认框
        this.$confirm('确认删除吗?').then(async() => {
          await delDepartment(id)
          await this.getdepartment()
          this.$message.success('删除成功')
        })
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
.tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px;
}
</style>
